<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">Datos personales</div>
		</header>
	<!-- 名前 年齢 性別 メールアドレスを入力してください 現在の住所を入力してください 結婚状況 学歴 -->
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Introduzca la dirección de correo electrónico" v-model="data.email" />
	    </div>
	</div>
	
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Por favor, introduzca WhatsApp" v-model="data.line" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Introduzca su nombre" v-model="data.name" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Introduzca su edad" v-model="data.age" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Introduzca su sexo" readonly @click="openPicker('gender')"
	            v-model="data.gender" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Introduzca su dirección actual" v-model="data.address" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Por favor, ingrese su estado civil actual." readonly @click="openPicker('marital')"
	            v-model="data.marital_status" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="Por favor, introduzca su título actual." readonly v-model="data.education_level"
	            @click="openPicker('education')" />
	    </div>
	</div>
	<div class="topup" @click="sub">Configuración</div>

		<Picker v-if="picker_loading" v-model:isShowPicker="isShowPicker" v-model:anchor="anchor" :data="picker_data"
			:options="options" @confirm="confirmSelection" />
	</div>
</template>

<script>
	import AJAX from '@/utils/http'
	import {
		Picker
	} from 'vue3-picker';

	export default {
		components: {
			Picker,
		},

		data() {
			return {
				picker_loading: false,
				isShowPicker: false,
				anchor: 0,
				options: {
					titleText: '',
					cancelColor: '#999',
					confirmColor: '#1766ff',
				},
				picker_list:{},
				picker_data: [],
				user:{},
				pickerType: "",
				data: {},
				countDown:60, // 默认时间60秒
				countDownTimeout:null,  // 倒计时计数器
				resetBtndisab:false, //重发按钮初始值为不可用
				
			};
		},
		created() {
			this.fetchData();
			

		},
		mounted() {
			this.picker_loading = true;
		},
		methods: {
			sub(){
				if(this.data.name == '' || this.data.name == undefined){
					this.$toast('Dos contraseñas inconsistentes');
					return;
				}
				else if(this.data.age == '' || this.data.age == undefined){
					this.$toast('Introduzca su edad');
					return;
				}
				else if(this.data.gender == '' || this.data.gender == undefined){
					this.$toast('Introduzca su sexo');
					return;
				}
				else if(this.data.address == '' || this.data.address == undefined){
					this.$toast('Introduzca su dirección actual');
					return;
				}
				else if(this.data.marital_status == '' || this.data.marital_status == undefined){
					this.$toast('Por favor, ingrese su estado civil actual.');
					return;
				}
				else if(this.data.education_level == '' || this.data.education_level == undefined){
					this.$toast('Por favor, introduzca su título actual.');
					return;
				}
				if(!this.data.email){
					this.$toast("El buzón es necesario");
					return;
				}
				else{
					AJAX.post('/user/personal/save/true', this.data).then(e => {
						if (!e.code) {
							this.$toast(e.msg);
							return;
						}
						this.$alert(e.msg, "Ok", {
						     confirmButtonText: "Ok",
						     callback: action => {
						       this.$router.go(-1);
						     }
						});
					});
				}
			},
			sendEmail(){
				if(!this.data.email){
					this.$toast("El buzón es necesario");
					return;
				}
				this.countDown = 60
				this.resetBtndisab = true;
				AJAX.post('/Ems/send', {email:this.data.email}, {
					showLoading: false
				}).then(e => {
					if (!e.code) {
						this.$toast(e.msg);
						return;
					}else{
						this.$toast("El Código de verificación fue enviado con éxito.");
					}
				});
				this.doCountDown();
			},
			
			// 倒计时开始
			doCountDown(){
				this.countDownTimeout=setTimeout(()=>{
					this.countDown--;
					if(this.countDown<=0){
							 this.resetBtndisab = false;
							 clearTimeout(this.countDownTimeout);
					}else{
						this.doCountDown(this.countDown)
					}
				},1000)
			},
			fetchData() {
				AJAX.post('/user/personal', {}).then(e => {
					if (e.data.list) {
						this.data = e.data.list;
					}
					if(e.data.user){
						this.user = e.data.user
					}
					this.picker_list = e.data.picker_list;
				});
			},
			openPicker(type) {
				this.pickerType = type;
				this.picker_data = this.picker_list[type];
				this.isShowPicker = true;
			},
			confirmSelection(value) {
				if (this.isShowPicker && value) {

					switch (this.pickerType) {
						case 'gender':
							this.data.gender = value;
							break;
						case 'marital':
							this.data.marital_status = value;
							break;
						case 'education':
							this.data.education_level = value;
							break;
					}

					this.isShowPicker = false;
				}
			},
			cancelSelection() {
				this.isShowPicker = false;
			},
			
			
		}
	};
</script>

<style scoped>
	.personal {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ditem {
		margin-top: 12px;
	}
</style>
